<template>
  <div class="mylist">
    <van-search v-model="searchValue" placeholder="请输入搜索关键词" input-align="center" style="margin:10px 0;padding:10px;background:#e5e5e5" />
    <div v-if="enableCli">
      <delete-slider @cli="cli()" v-for="(list, index) in dataList" :key="index" @deleteLine="deleteLine(index, list.id)">
        <div style="width:24%;position:relative">
          <div class="li-img" slot="img">
          <img :src="list.img" alt="">
        </div>
        <span slot="icon" style="background:#49a1e4;border-radius: 50%;color:#fff;font-size:10px;padding:1px;text-align:center;position:absolute;left:40px;top:4px;border:1px solid #000,z-index:9999">
          10
        </span>
        </div>
        <div style="width:100%">
          <h3 class="li-title" slot="title">{{list.title}}</h3>
          <p class="li-price" slot="price">{{list.price}}</p>
        </div>
        <div style="position:absolute;right:10px;font-size:14px">
          12:00
        </div>
      </delete-slider>
    </div>
    <div v-if="enableShow">
      <cosePage @col="col()"/>
    </div>
  </div>
</template>

<script>
import deleteSlider from "@/components/component/list.vue";
import cosePage from '@/components/conversation/cose.vue'
export default {
  components: {
    deleteSlider,
    cosePage,
  },
  data() {
    return {
      searchValue: "",
      enableShow:false,
      enableCli:true,
      dataList: [
        {
          id: 1,
          img:
            "http://img0.imgtn.bdimg.com/it/u=1972224372,2850391150&fm=26&gp=0.jpg",
          title: "Spider",
          price: "你好"
        },
        {
          id: 2,
          img:
            "http://img0.imgtn.bdimg.com/it/u=3256100974,305075936&fm=26&gp=0.jpg",
          title: "小迪迪",
          price: "你好"
        },
        {
          id: 3,
          img:
            "http://img0.imgtn.bdimg.com/it/u=1972224372,2850391150&fm=26&gp=0.jpg",
          title: "小迪迪",
          price: "你好"
        },
        {
          id: 4,
          img:
            "http://img0.imgtn.bdimg.com/it/u=3256100974,305075936&fm=26&gp=0.jpg",
          title: "小迪迪",
          price: "你好"
        }
      ]
    };
  },  
  methods: {
    col(){
      this.enableShow = false;
      this.enableCli = true;
    },
    cli(){
      this.enableShow = true;
      this.enableCli = false;
      console.log(this.enableShow)
    },
    deleteLine(index, id) {
      console.log(id);

      // this.dataList.splice(index, 1);
    }
  }
};
</script>

<style scoped lang="scss">
.li-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin: 10px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.li-title {
  font-size: 14px;
  height: 20px;
  overflow: hidden;
  margin: 0;
  padding: 2px 0;
}
.li-price {
  font-size: 12px;
  height: 14px;
  margin: 0;
  padding: 0;
  color: #666;
}
</style>
